<style lang="scss" scoped>
.table-panel {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 100%;
  background-color: white;
  box-shadow: 1px 2px 4px 4px #c5c5c5;
}
.talbe-title {
  background-color: #4d6390;
  height: 35px;
  span {
    color: white;
    line-height: 35px;
    padding-left: 10px;
  }
  i {
    float: right;
    color: white;
    line-height: 35px;
    margin-right: 10px;
  }
}
</style>
<template>
  <div class="table-panel">
    <div class="talbe-title">
      <span>查询结果</span>
      <i
        @click="close"
        class="el-icon-close"
      ></i>
    </div>
    <el-table
      :data="currentData"
      style="width: 100%"
      border
      size="mini"
    >
      <el-table-column
        v-for="(item) in queryFields"
        :key="item.name"
        :label="item.name"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.attributes[item.name] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
      class="page"
       small
    >
    </el-pagination>
  </div>
</template>

<script>

export default {
  data () {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 0,
      currentData: []
    }
  },
  props: {
    queryFields: Array,
    list: Array
  },
  mounted () {
    this.total = this.list.length
    this.sliceData()

  },
  updated(){
    let height =this.$el.clientHeight
    this.$emit('changeMap',height)
  },
  methods: {
    handleSizeChange (value) {
      this.pageSize = value
      this.sliceData()
    },
    handleCurrentChange (value) {
      this.currentPage = value
      this.sliceData()
    },
    sliceData () {
      let pageSize = this.pageSize
      let currentPage = this.currentPage
      this.currentData = this.list.slice(pageSize * (currentPage - 1), pageSize * currentPage)
    },
    close () {
      this.$emit('closeTable')
    }
  },
  beforeDestroy(){
    this.$emit('changeMap',0)

  }
}
</script>